<template>
    <div class="wrap">

      <h3>我的订单</h3>
      <div class="order-header" v-show="show">
        <span :class="{'span2':active==index}" class="span1" @click="change(index)" v-for="(item,index) in arr">{{item.tit}}</span>
        <span class="span3">订单回收站</span>
      </div>
      <div class="order-content" v-show="show">
        <ul class="ul" v-if="bol">
          <li class="li" v-for="(or,index) in order" :key='index'>
            <div class="con-top">
              <p class="p1">订单号 : <span>{{or.num}}</span></p>
              <p class="p2">下单日期 : <span>{{or.time}}</span></p>
              <p class="p3">{{or.shop}}</p>
              <p class="p4">订单状态：<span>{{or.state}}</span></p>
            </div>
            <div class="con-bot clearfix">
              <div class="con-bot-left">
                <div class="con-bot-left-lis" v-for="(or2,index2) in or.order2" >
                  <img :src="or2.url" />
                  <span class="s1">{{or2.tit2}}</span>
                  <span class="s2">{{or2.tit3}}</span>
                  <span class="s3">{{or2.tit4}}x{{or2.tit5}}</span>
                </div>

              </div>
              <div class="con-bot-con" :style="{height:h+'px'}">
                  <p>
                    店铺合计: <span>{{or.sum}}</span><br>
                    （含运费：¥8.0）
                  </p>
              </div>
              <div class="con-bot-right" :style="{height:h+'px'}">
                <p>
                  <router-link to="/orderDetail">
                    <span>查看详情</span>
                  </router-link>
                  <button v-if="or.del" class="del">删除订单</button>
                  <button v-if="or.zhifu" class="zhifu">去支付</button>
                  <button v-if="or.quxiao" class="quxiao">取消订单</button>
                  <button v-if="or.tuikuan" class="tuikuan">申请退款</button>
                  <button v-if="or.qrsh" class="qrsh">确认收货</button>
                  <button v-if="or.ckwl" class="ckwl">查看物流</button>
                  <button v-if="or.pingjia" class="pingjia">去评价</button>
                  <button v-if="or.jywc" class="jywc">交易完成</button>
                  <button v-if="or.sqptjr" class="sqptjr">申请平台介入</button>
                </p>
              </div>
            </div>
          </li>





        </ul>
        <div class="order-empty" v-else>
          <div class="order-empty-left">
            <img src="../../../static/zwf/mine/ding.png" />
          </div>
          <div class="order-empty-right">
            <p>你还没有订单哦!</p>
            <router-link to="/">
              <span>去首页看看</span>
            </router-link>

          </div>
        </div>
      </div>
      <p class="pp" v-show="show1">暂无数据,请登录</p>

    </div>
</template>

<script>
    export default {
        name: "Myorder",
      data(){
          return{
            active:0,
            bol:true,
            h:0,
            del:false,
            zhifu:false,
            quxiao:false,
            tuikuan:false,
            qrsh:false,
            ckwl:false,
            pingjia:false,
            jywc:false,
            sqptjr:false,
            show:true,
            show1:false,
            arr:[
              {tit:'全部'},
              {tit:'待付款'},
              {tit:'代发货'},
              {tit:'待收货'},
              {tit:'待评价'},
              {tit:'退款/售后'},
              {tit:'已完成/关闭'},
            ],
            order:[
              {num:'150319690000',time:'2015.04.09  18:06:06',shop:'爱果果水果店',state:'关闭',sum:'￥105.0',del:true,
                order2:[
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'2'},
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                ]
              },
              {num:'150319690000',time:'2015.04.09  18:06:06',shop:'爱果果水果店',state:'待付款',sum:'￥70.0',zhifu:true,quxiao:true,
                order2:[
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                ]
              },
              {num:'150319690000',time:'2015.04.09  18:06:06',shop:'爱果果水果店',state:'待发货',sum:'￥105.0',tuikuan:true,
                order2:[
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'2'},
                ]
              },
              {num:'150319690000',time:'2015.04.09  18:06:06',shop:'爱果果水果店',state:'已发货',sum:'￥70.0',qrsh:true,ckwl:true,
                order2:[
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                ]
              },
              {num:'150319690000',time:'2015.04.09  18:06:06',shop:'爱果果水果店',state:'已收货',sum:'￥105.0',tuikuan:true,jywc:true,pingjia:true,
                order2:[
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'2'},
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                ]
              },
              {num:'150319690000',time:'2015.04.09  18:06:06',shop:'爱果果水果店',state:'申请退款中',sum:'￥70.0',
                order2:[
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                ]
              },
              {num:'150319690000',time:'2015.04.09  18:06:06',shop:'爱果果水果店',state:'退款中',sum:'￥70.0',
                order2:[
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                ]
              },
              {num:'150319690000',time:'2015.04.09  18:06:06',shop:'爱果果水果店',state:'退款失败',sum:'￥105.0',sqptjr:true,
                order2:[
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'1'},
                  {'url':'../../../static/zwf/mine/pg.png',tit2:'云南昭通丑苹果',tit3:'6个装',tit4:'￥35.0',tit5:'2'},
                ]
              }
            ]
          }
      },
      methods:{
          change(i){
            this.active=i;
            // this.h=this.order2.length*this.h;

          }
      },
      mounted(){
        this.h=(this.order[0].order2.length)*(120)+(this.order[0].order2.length)-1
        if(this.$store.state.phone==''){
          this.show=false;
          this.show1=true;
        }else{
          this.show=true;
          this.show1=false;
        }
      }
    }
</script>

<style scoped>
  .wrap{
    width: 1083px;
    border: 1px solid #e7e7e7;
  }
  .wrap h3{
    width: 1063px;
    height: 56px;
    line-height: 56px;
    padding-left: 20px;
    font-size: 18px;
    color: #212121;
    border-bottom: 1px solid #e7e7e7;
  }


  .order-header{
    width: 1043px;
    padding:0 20px;
    height: 48px;
  }

  .order-header .span1{
    position: relative;
    float: left;
    margin-right: 60px;
    height: 18px;
    line-height: 18px;
    padding:5px 15px;
    color: #666666;
    margin-right: 50px;
    margin-top: 20px;
    font-size: 16px;
    cursor: pointer;
  }
  .order-header .span1:after{
    position: absolute;
    top: 5px;
    left: -26px;
    content: '';
    width: 1px;
    height: 17px;
    background: #999999;
  }
  .order-header .span1:first-child:after{
    display: none;
  }

  .order-header .span2{
    background: #f08200;
    color: #fff;
  }

  .order-header .span3{
    float: right;
    margin-top: 20px;
    font-size: 16px;
    color: #4b943d;
    text-decoration: underline;
    cursor: pointer;
  }


  .order-content{
    position: relative;
    width: 1083px;

  }

  .ul{
    width: 1083px;
  }
  .ul .li{
    width: 1044px;
    border: 1px solid #e9e9e9;
    margin: 20px;
  }
  .con-top{
    width: 1004px;
    height: 46px;
    background: #f2f2f2;
    padding: 0 20px;
  }
  .con-top p{
    float: left;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
  }
  .con-top .p1{
    width: 210px;
    color: #333333;
  }
  .con-top .p2{
    width: 280px;
    color: #333333;
  }
  .con-top .p3{
    width: 180px;
    color: #4b943d;
  }
  .con-top .p4{
    width: 330px;
    color: #333333;
    text-align: right;
  }
  .con-top .p4 span{
    color: #f08200;
  }



  .con-bot-left{
    float: left;
  }
  .con-bot-left-lis{
    width: 697px;
    height: 120px;
    border-top: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
  }
  .con-bot-left-lis:first-child{
    border-top:none;
  }
  .con-bot-left-lis img{
    margin: 20px;
    vertical-align: middle;
  }
  .con-bot-left-lis span{
    font-size: 14px;
    color: #a9a9a9;
  }
  .con-bot-left-lis .s2{
    margin-left: 150px;
    margin-right: 105px;
  }
  .con-bot-con{
    position: relative;
    float: left;
    width: 208px;
    height: 120px;
    font-size: 14px;
    border-right: 1px solid #e9e9e9;
  }
  .con-bot-con p{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 140px;
    height: 60px;
    text-align: center;
    line-height: 2;

  }
  .con-bot-right{
    position: relative;
    float: left;
    width: 137px;
    height: 120px;
  }
  .con-bot-right p{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 150px;
    text-align: center;
  }
  .con-bot-right p span{
    display: block;
    font-size: 14px;
    color: #4b943d;
    text-decoration: underline;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .con-bot-right p button{
    margin-bottom: 10px;
  }
  .con-bot-right p .del{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }
  .con-bot-right p .zhifu{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }
  .con-bot-right p .quxiao{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #999999;
    border-radius: 5px;
    cursor: pointer;
  }
  .con-bot-right p .tuikuan{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }
  .con-bot-right p .qrsh{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }
  .con-bot-right p .ckwl{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }
  .con-bot-right p .pingjia{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }
  .con-bot-right p .jywc{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }
  .con-bot-right p .sqptjr{
    width: 90px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }

  .order-empty{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 330px;
    height: 170px;
  }
  .order-empty-left{
    padding: 33px 30px;
    float: left;
  }
  .order-empty-right{
    padding-top: 34px;
    float: left;
  }
  .order-empty-right p{
    font-size: 20px;
    color: #666666;
    margin-bottom: 30px;
  }
  .order-empty-right span{
    font-size: 18px;
    padding: 15px 40px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    cursor: pointer;
  }
  .pp{
    width: 1083px;
    height: 46px;
    line-height: 46px;
    text-align: center;
  }
</style>
